HTML SVG Tag
The HTML <svg> tag is used to define editable vector images. SVG is an XML-based format for vector graphics, which means it can scale to any size without losing quality. SVG is used to create graphics such as lines, shapes, text, and supports styling and scripting.
Basic Structure
Here is a simple example of an SVG element,
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>Explanation-
<svg>element Parent container for SVG elements.- The
widthandheightattributes set the shape of the SVG viewport. - <circle> Element Defines circular shape.
- The attributes
cxandcydefine the x and y coordinates of the center of the circle. - The
rattribute determines the radius of the circle. - The
Strokeattribute sets the color of the circle border. - The
stroke-widthattribute sets the border width. fillattribute Sets the color to fill the circle.
Common SVG Elements
Here are some other common SVG objects.
Rectangle
<svg width="200" height="100">
<rect width="100" height="50" x="50" y="25" fill="blue" />
</svg><rect> element defines a rectangle.
widthandheightattributes set the dimensions.xandyattributes set the position.fillattribute sets the fill color.
Line
<svg width="200" height="100">
<line x1="0" y1="0" x2="200" y2="100" stroke="black" stroke-width="2" />
</svg><line>element defines a line segment.x1,y1andx2,y2attributes aset the start and end coordinates.strokeandstroke-widthattributes set the color and width of the line.
Polygon
<svg width="200" height="100">
<polygon points="50,0 100,100 0,100" fill="green" />
</svg><polygon>element defines a closed shape with multiple points.pointssets the coordinates of the vertices.
Text
<svg width="200" height="100">
<text x="10" y="40" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg><text> element defines the text.
xandyattributes set the position.font-family,font-size, andfillattributes set the font style and color.
Using SVG with CSS and JavaScript
You can use CSS for styling the SVG elements and add interactivity with JavaScript.
CSS Example
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" class="my-circle" />
</svg>
<style>
.my-circle {
fill: yellow;
stroke: blue;
stroke-width: 5;
}
</style>JavaScript Example
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
<script>
document.getElementById("myCircle").addEventListener("click", function() {
this.setAttribute("fill", "green");
});
</script>Embedding SVG in HTML
You can place SVG directly into HTML documents in several ways,
Inline SVG
<div>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>External SVG File
<object type="image/svg+xml" data="image.svg"></object>or
<img src="image.svg" alt="Description of the image">Example-
Here is a basic example to demonstrates the use of HTML SVG tag,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic SVG Example</title>
</head>
<body>
<h1>Basic shapes using HTML SVG</h1>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Draw a rectangle -->
<rect x="10" y="10" width="100" height="50" fill="blue" />
<!-- Draw a circle -->
<circle cx="150" cy="50" r="40" fill="red" />
<!-- Draw some text -->
<text x="10" y="150" font-family="Verdana" font-size="20" fill="black">I am SVG!</text>
</svg>
</body>
</html>In the above example-
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> This defines the SVG canvas as having a width and height of
200 pixels. the xmlns attribute specify the
XML namespace for the SVG.
Rectangle
<straight x="10" y="10" width="100" height="50" fill="blue" />
x="10" and y="10" Place the top left corner of the rectangle at (10, 10).
width="100" and height="50" Sets the dimensions of the rectangle.
fill="blue" Set the fill color to blue.
circle
<circle cx="150" cy="50" r="40" insert="red" />
cx="150" and cy="50" Place the center of the circle at (150, 50).
r="40" Set the radius of the circle to 40 pixels.
fill="red" Sets the fill color to red.
Text
<text x="10" y="150" font-family="Verdana" font-size="20" fill="black">Hello, SVG!</text>
x="10" and y="150" Set the bottom left corner of the text to (10, 150).
font-family="Verdana" Set the font family to Verdana.
font-size="20" Set the font size to 20 pixels.
fill="black" Sets the text color to black.
Output-
Also, Read: How to fetch data from API using HTML Fetch API
Leave Comment